<template>
<div>
  <div class="info">
    <h1>{{sub?.title}}</h1>
    <p>{{sub?.createTime}}</p>
  </div>
  <MarkdownPreview :value="sub?.text" />
</div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import MarkdownPreview from "../../components/markdown/MarkdownPreview.vue";

const route = useRoute();
const sub = ref(null);

const getSubject = async id => {
  const subject = await fetch(`/api/t/subj/${id}`)
  return await subject.json();
}

onMounted(async () => {
  sub.value = await getSubject(route.params.id);
})
</script>

<style scoped>
.info {
  padding: 0 40px;
}
</style>